<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册🐷</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/register.css">
    <style>
        .align-middle {
            margin-left: 15rem;
            margin-bottom: 2rem;
        }

        .btn {
            margin-left: 10rem;
        }

        .col-2 {
            padding-top: 7px;
        }

        .form-check {
            padding-left: 7rem;
        }

        .form-group {
            margin-left: 5rem;
        }

        .comment {
            display: none;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row align-items-center">
            <div class="col"></div>
            <div class="col">
                <div class="alert alert-danger text-center invisible" role="alert" style="width: 42rem;">
                    <strong>提示：</strong>
                    <font id="msgId">这里有一些错误，看着就好</font>
                </div>
            </div>
            <div class="col"></div>
        </div>
        <div class="row align-items-center" style="height: 40rem;">
            <div class="col">

            </div>
                    <div class="col">
                        <div class="card shadow rounded" style="width: 40rem; background-color: rgb(240, 238, 114);">
                            <div class="card-body align-items-center">
                                <h2 class="align-middle">欢迎注册🐖</h2>
                                <form action="/registerDone" class="register" method="POST" id="registerForm">
                                    <div class="form-group">
                                        <label for="exampleInputEmail1">用户名：</label>
                                        <input type="email" class="form-control" id="registerUsername"
                                            aria-describedby="emailHelp" name="registerUsername">
                                        <small id="emailHelp" class="form-text text-muted">{{msg}}</small>
                                    </div>
                                    <div class="form-group">
                                        <label for="exampleInputPassword1">密码：</label>
                                        <input type="password" class="form-control" id="registerPassword" name="registerPassword">
                                    </div>
                                    <div class="form-group">
                                        <label for="exampleInputPassword1">确认密码：</label>
                                        <input type="password" class="form-control" id="registerRePassword" name="registerRePassword">
                                    </div>
                                    <button type="button" class="btn btn-primary" onclick="register()">注册</button>
                                    <button type="button" class="btn btn-primary"
                                        onclick="window.location.href='/login'">取消</button>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="col">

                    </div>
                </div>
            </div>

            <script src="js/jquery-3.6.0.min.js"></script>
            <script src="js/bootstrap.min.js"></script>
            <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>

            <script>

                function register() {
                    // 获取表单数据
                    let uid = $('#registerUsername').val();
                    let pwd = $('#registerPassword').val();
                    let confirmpwd = $('#registerRePassword').val();

                    console.log(uid);
                    console.log(pwd);
                    
                    // 判断用户名、密码是否为空，为空则提示；不为空则向服务器提交
                    if (uid.length > 0 && pwd.length > 0 && pwd === confirmpwd) {
                        axios({
                            method: 'post',
                            url: '/registerDone',
                            data: $('#registerForm').serialize(),
                        }).then(function (res) {
                            // axios工具下，服务器真正返回的数据在返回对象的data中
                            res = res.data;
                            if (res.code === 200) {
                                window.location.href = '/login';
                            } else {
                                alert_fn(res.msg);
                                console.log(res.msg);
                            }
                        }).catch((err) => {
                            alert_fn(err);
                            
                        });
                    } else {
                        alert_fn('用户名、密码不能为空，并且两次密码应该一致');
                    }
                }

                function alert_fn(msg) {
                    $('#msgId').text(msg);
                    $('.alert').removeClass('invisible');
                    setTimeout(() => {
                        $('.alert').addClass('invisible');
                    }, 3000);
                }
            </script>

</body>

</html>